<template>
  <div class="historical-curve">
    <div class="aside">
      <div class="title">设备列表</div>
      <div class="tree-wrap">
        <el-tree
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
        />
      </div>
    </div>
    <div class="main-content">
      <div class="title-wrap">
        <div class="search-wrap">
          <el-form :inline="true" :model="params">
            <el-row :gutter="50">
              <el-col :span="6">
                <el-form-item label="起始日期">
                  <el-date-picker
                    class="date-sel"
                    v-model="params.date"
                    type="date"
                    placeholder="请选择日期"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="结束日期">
                  <el-date-picker
                    class="date-sel"
                    v-model="params.date"
                    type="date"
                    placeholder="请选择日期"
                    clearable
                  />
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item>
                  <el-button :icon="Search" type="primary" @click="getList"
                    >查询</el-button
                  >
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div class="table-data">
          <el-table class="table-height" :data="tableData" style="width: 100%">
            <el-table-column prop="name" align="center" label="设备名称" />
            <el-table-column prop="age" align="center" label="数据项" />
            <el-table-column prop="age" align="center" label="最大值" />
            <el-table-column prop="age" align="center" label="发生时间" />
          </el-table>
        </div>
      </div>
      <div class="charts">
        <LineChart />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { Search } from "@element-plus/icons-vue";
import LineChart from "./components/LineChart";
let params = reactive({});
const defaultProps = {
  children: "children",
  label: "label",
};
let tableData = ref([
  { name: "zs", age: 19 },
  { name: "zs", age: 19 },
  { name: "zs", age: 19 },
  { name: "zs", age: 19 },
  { name: "zs", age: 19 },
]);
let handleNodeClick = (e) => {
  console.log(e, "e");
};
const data = [
  {
    label: "Level one 1",
    children: [
      {
        label: "Level two 1-1",
        children: [
          {
            label: "Level three 1-1-1",
          },
        ],
      },
    ],
  },
  {
    label: "Level one 2",
    children: [
      {
        label: "Level two 2-1",
        children: [
          {
            label: "Level three 2-1-1",
          },
        ],
      },
      {
        label: "Level two 2-2",
        children: [
          {
            label: "Level three 2-2-1",
          },
        ],
      },
    ],
  },
  {
    label: "Level one 3",
    children: [
      {
        label: "Level two 3-1",
        children: [
          {
            label: "Level three 3-1-1",
          },
        ],
      },
      {
        label: "Level two 3-2",
        children: [
          {
            label: "Level three 3-2-1",
          },
        ],
      },
    ],
  },
];
</script>
<style lang="scss" scoped>
.historical-curve {
  width: 100%;

  margin-top: 9px;
  display: flex;
  .aside {
    width: 204px;

    background-color: #022552;
    height: calc(100vh - 168px - 9px);
    padding-top: 26px;
    .tree-wrap {
      padding-top: 28px;
      display: flex;
      padding-left: 25px;
      justify-content: center;
      :deep(.el-tree) {
        width: 100%;
        background-color: #022552;
        height: calc(100vh - 168px - 9px - 28px);
      }
    }
    .title {
      font-family: Source Han Sans CN;
      font-weight: 400;
      font-size: 18px;
      color: #ffffff;
      line-height: 25px;
      text-align: center;
    }
  }
  .main-content {
    display: flex;
    flex-direction: column;
    margin-left: 9px;
    flex: 1;
    .title-wrap {
      background-color: #022552;
      /* height: 276px !important; */
      height: 260px !important;
      .table-data {
        padding: 5px 18px 0 13px;
        .table-height {
          height: 17vh;
        }
        :deep(.el-table__row .cell) {
          font-family: Source Han Sans CN;
          font-weight: 400;
          font-size: 18px;
          color: #cdcdcd;
        }
        :deep(.el-table thead tr) {
          color: #ffffff;
          font-size: 20px;
          font-weight: 400;
        }
      }
      .search-wrap {
        padding-top: 24px;
        padding-left: 30px;
        :deep(.el-date-editor) {
          width: 300px !important;
        }

        :deep(.el-button) {
          width: 84px;
          height: 35px;
          background: rgba(27, 168, 255, 0.35);
          border: 1px solid #61c8ff;
          font-family: Source Han Sans CN;
          font-weight: 500;
          font-size: 18px;
          color: #fefefe;
          line-height: 23px;

          svg {
            width: 50px !important;
            height: 17px !important;
          }
        }
      }
    }
    .charts {
      margin-top: 10px;

      background-color: #022552;
      height: calc(100vh - 168px - 9px - 260px - 10px);
    }
  }
}
</style>
